<template>
    <div class="goodsinfo-container">
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" v-show="ballFlag" ref="ball"></div>
        </transition>
       <!--轮播图-->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <mt-swipe :auto="4000">
                        <mt-swipe-item><img src="https://img12.360buyimg.com/n7/jfs/t1/63859/7/3651/85020/5d1c8160E72bf7ea6/297c18be6ec1b7a6.jpg" alt=""/></mt-swipe-item>
                        <mt-swipe-item><img src="https://img12.360buyimg.com/n7/jfs/t1/59110/23/3879/62342/5d1b2070Ea090bfe1/2bf300d3f11430fb.jpg" alt=""/></mt-swipe-item>
                        <mt-swipe-item><img src="https://img13.360buyimg.com/n7/jfs/t1/80433/35/3567/91207/5d1c801aE08470145/0d65ff190c999d15.jpg" alt=""/></mt-swipe-item>
                    </mt-swipe>
                </div>
            </div>
        </div>
        <!--商品描述-->
        <div class="mui-card">
            <div class="mui-card-header">小米 CC 9屏幕指纹 3200万美颜自拍 480</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>
                        市场价：<del>2100</del>
                        销售价：<span class="saleprice">￥1999</span>
                    </p>
                    <div class="buy-number">
                        购买数量：<numbox @getNumber="getBuyNumber"></numbox>
                    </div>
                    <p>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click="toShopCar">加入购物车</mt-button>
                    </p>
                </div>
            </div>
        </div>
        <!--商品参数-->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号：7652061</p>
                    <p>库存情况：100件</p>
                    <p>上架时间：2019-6-15</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain>图文介绍</mt-button>
                <mt-button type="danger" size="large" plain>商品评论</mt-button>
            </div>
        </div>
    </div>
</template>
<script type="es6">
import numbox from '../subcomponents/numbox.vue';
export default {
    data(){
        return {
            ballFlag: false,
            number: 1
        }
    },
    methods: {
        toShopCar() {
            this.ballFlag = !this.ballFlag;
            var goodsInfo = {
                id: 1,
                count: this.number,
                price: 1999,
                selected: true
            };
            this.$store.commit('addGoods',goodsInfo);
        },
        beforeEnter(el) {
                el.style.transform = 'translate(0,0)';
        },
        enter(el,done) {
            el.offsetWidth;
            //获取小球的位置
            var ballPosition = this.$refs.ball.getBoundingClientRect();
            //获取购物车徽标的位置
            var badgePosition = document.querySelector('#badge').getBoundingClientRect();
            //计算小球移动的距离
            var distanceX = badgePosition.left - ballPosition.left;
            var distanceY = badgePosition.top - ballPosition.top;
            el.style.transform = `translate(${distanceX}px,${distanceY}px)`;
            el.style.transition = 'all 1s ease';
            done();
        },
        afterEnter(el) {
            this.ballFlag = !this.ballFlag;
        },
        getBuyNumber(num) {
            this.number = num;
        }
    },
    components: {
        numbox
    }
}
</script>
<style lang="less" scoped>
    .ball {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        z-index: 99;
        left: 146px;
        top: 387px;
    }
    .mint-swipe {
        height: 200px;
        .mint-swipe-item {
            text-align: center;
            img {
                height: 100%;
            }
        }
    }
    .goodsinfo-container {
        background-color: #eee;
        overflow: hidden;
        .saleprice {
            color: red;
        }
        .buy-number {
            margin-bottom: 10px;
        }
        .mui-card-footer {
            display: block;
            button {
                margin: 10px 0px;
            }
        }
    }
</style>